<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品详情</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/xq.css" />
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
		<script src="html5plus://ready"></script>
		<script src="../../js/vue.min.js"></script>
		<script src="../../js/vant.min.js"></script>
		<script src="html5plus://ready"></script>
		<script src="../../js/ajax.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/listener_other.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			body {
				background-color: #E5E5E5;
			}
			#app {
				margin-top: 46px;
			
			}
			.asd{
				margin-top: 40px;
			}
			.head {
				z-index: 2;
				position: fixed;
				top: 20px;
				left: 15px;
				color: white;
			}

			.padding {
				padding: 10px 15px 0px;
			}

			.daxiao {
				font-size: 14px;
				color: darkgray;
			}

			.bg-color {
				background-color: #F7F8FA;
			}

			.pd-bottom {
				padding-bottom: 10px;
			}

			.mg-top {
				margin-top: 20px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<van-row>
				<van-col span="24" class="asd">
					<van-icon color="black" size="24px" name="arrow-left" class="head" @click="fanhui"></van-icon>
					<van-swipe :autoplay="3000">
						<van-swipe-item v-for="(image, index) in images" :key="index">
							<img :src="image.src" onerror="this.src='../../img/photo.png'" style="width: 100%;" />
						</van-swipe-item>
					</van-swipe>
				</van-col>
			</van-row>

			<van-row class="padding">
				<van-col span="24">
					<h3>
						{{Name}}
					</h3>
				</van-col>
			</van-row>

			<van-row class="padding">
				<van-col span="24">
					<h2 class="red">￥{{MarketPrice}}</h2>
				</van-col>
			</van-row>

			<van-row class="padding daxiao">
				<van-col span="10">
					<span>快递：免运费</span>
				</van-col>
				<van-col span="10">
					<span>销量290</span>
				</van-col>
			</van-row>

			<van-row class="padding bg-color pd-bottom">
				<van-col span="8">
					<span class="red">
						<van-icon size="14px" name="passed"></van-icon>
						正品保证
					</span>
				</van-col>
				<van-col span="8">
					<span class="red">
						<van-icon size="14px" name="passed"></van-icon>
						极速退款
					</span>
				</van-col>
				<van-col span="8">
					<span class="red">
						<van-icon size="14px" name="passed"></van-icon>
						两天内发货
					</span>
				</van-col>
			</van-row>

			<van-row class="padding mg-top">
				<van-col span="24">
					<span>商品详情</span>
				</van-col>
			</van-row>
			<img :src="CoverImage" onerror="this.src='../../img/photo.png'" style="width: 100%;" />
			<van-row class="padding mg-top">
				<van-col span="24">
					<van-goods-action>
						<van-goods-action-mini-btn :icon="tb" icon-class="red" text="收藏" @click="onClickMiniBtn"></van-goods-action-mini-btn>
						<!-- <van-goods-action-mini-btn :icon="tb" icon-class="red" text="取消收藏" @click="cancelCollect"></van-goods-action-mini-btn> -->
						<van-goods-action-big-btn :text=shoptext @click="onClickGouWuChe"></van-goods-action-big-btn>
						<van-goods-action-big-btn primary text="立即购买" @click="onClickLiJiGouMai"></van-goods-action-big-btn>
					</van-goods-action>
				</van-col>
			</van-row>
		</div>
	</body>
	<script type="text/javascript">
		var newUser = localStorage.getItem("user"); //从localStorage里取数据(字符串格式)
		newUser = JSON.parse(newUser); //把字符串格式转换成Json格式
		key =newUser.Key;
		var vm = new Vue({
			el: "#app",
			data: {
				images: [],
				Name: "",
				Id:"",
				d:[],
				radio:"alipay",
				MarketPrice: "",
				CoverImage: "",
				tb: "like-o",
				detail: "",
				phone: "",
				isCollected: false,
				addShopcartCount: 0,
				pid: 0,
				shops:[],
				shoptext:"加入购物车"
				

			},
			created: function() {
				var w = plus.webview.currentWebview()
				console.log(w);
				var _this = this;
				ajax({ //请求产品数据
					url: "http://dsapi.ysd3g.com/API/GoodsDetail",
					dataType: "jsonp",
					data: {
						gId: w.ID
					},
					success: function(res) {
						console.log(res);
						_this.d=res;
						_this.shops.push(res.Detail);//push
						console.log(_this.shops);
						_this.Id = res.Detail.Id;
						_this.images = res.Detail.SwipeImages;
						_this.Name = res.Detail.Name;
						_this.MarketPrice = res.Detail.MarketPrice;
						_this.CoverImage = res.Detail.CoverImage;
						console.log(res);
						console.log(_this.Id);
					}
				})
			},
		methods: {
			onClickLeft: function() {
				console.log(123);
			},
			fanhui: function() {
				plus.webview.close(plus.webview.currentWebview(), "slide-out-left");
				console.log("返回商品页");
			},
			onClickMiniBtn: function() {
				if(this.isCollected==false){
					ajax({ //收藏商品
						url: "http://dsapi.ysd3g.com/API/CollectGoods",
						dataType: "jsonp",
						data: {							
							key: newUser.Key,
							goodsId:vm.Id
						},
						success: function(res) {
							if (res.Error==false) {
								vm.$toast("收藏成功");
								vm.isCollected = true;
								vm.tb="like";
							}
							else{
								console.log(res);
								if(res.Msg=="您已收藏过啦！"){
									vm.$toast.success("您已收藏过啦！");
								}
							}
						}
					})	
				}
				else{
					//取消收藏
					ajax({
						url: "http://dsapi.ysd3g.com/api/cancelCollectGoods",
						dataType: "jsonp",
						data: {
							key: key,
							goodsId: vm.Id
						},
						success(res) {
							if(!res.Error) {
								vm.tb="like-o";
								vm.$toast.success("已取消收藏");
								vm.isCollected = false;
							} else {
								vm.$toast.fail(res.Msg);
							}
						}
					});
				}
			},
			cancelCollect() {
				//取消收藏
				ajax({
					url: "http://dsapi.ysd3g.com/api/cancelCollectGoods",
					dataType: "jsonp",
					data: {
						key: key,
						goodsId: vm.Id
					},
					success(res) {
						if(!res.Error) {
							vm.$toast.success("已取消收藏");
							vm.isCollected = false;
						} else {
							vm.$toast.fail(res.Msg);
						}
					}
				});
			},
			onClickGouWuChe: function() {
				console.log("加入购物车");
				if(key == null) {
					plus.webview.create("../shopping/shopping.html", "shopping").show();
				} else {
					vm.$toast.success("加入购物车");
					// vm.phone = newUser.Phone;
					vm.phone = JSON.parse(plus.storage.getItem("userData"));
					console.log(vm.phone);
					var goodsArr = [{
						goodsId: vm.Id,
						buyCount: 1
					}];
					var goodsObj = {
						goodsId: vm.Id,
						buyCount: 1
					};
					var newArr;
					console.log(vm.Id);
					if(localStorage.getItem(vm.phone) == null) { //如果购物车里面没有任何东西
						localStorage.removeItem(vm.phone);
						localStorage.setItem(vm.phone, JSON.stringify(goodsArr));
						vm.addShopcartCount = 1; //显示此商品在购物车内的数量
					} else { //购物车里有东西
						newArr = JSON.parse(localStorage.getItem(vm.phone)); //购物车里面的商品
						console.log(newArr);
						for(var i = 0; i < newArr.length; i++) { //遍历购物车
							if(newArr[i].goodsId == vm.Id) { //如果购物车里面有此商品
								newArr[i].buyCount += 1; //商品数量+1
								vm.shoptext="加入购物车×"+newArr[i].buyCount;
								localStorage.removeItem(vm.phone);
								localStorage.setItem(vm.phone, JSON.stringify(newArr)); //
								console.log(JSON.stringify(newArr));
								for(i=0;i<localStorage.length;i++){
									console.log(localStorage.key(i)+":"+localStorage.getItem(localStorage.key(i)));
								　　//document.write(localStorage.key(i)+":"+localStorage.getItem(localStorage.key(i))+"<br/>");
								};
								console.log(newArr[0].buyCount);
								vm.addShopcartCount = newArr[0].buyCount; //显示此商品在购物车内的数量
								return;
								plus.webview.getWebviewById("friends").reload(true);
							}
						}
						//购物车里没有此商品
						newArr.push(goodsObj); //向购物车内添加商品
						localStorage.removeItem(vm.phone);
						localStorage.setItem(vm.phone, JSON.stringify(newArr)); //
						console.log(vm.phone);
						vm.addShopcartCount = 1; //显示此商品在购物车内的数量
						plus.webview.getWebviewById("friends").reload(true);
					}
				}
			},
			onClickLiJiGouMai: function() { //购买
				var _this = this;
				console.log(plus.webview.currentWebview().ID);
				var shoppingCartJsonStr = [{
					goodsId: plus.webview.currentWebview().ID,
					buyCount: 1
				}];
				var toast = vm.$toast.loading({
					duraion: 0,
					forbidClick: true,
					message: '正在生成订单'
				});
				ajax({ //生成订单
					url: "http://dsapi.ysd3g.com/API/GeneratingOrder",
					dataType: "jsonp",
					data: {							
						key: key,
						shoppingCartJsonStr: JSON.stringify(shoppingCartJsonStr)
					},
					success: function(res) {
						if(res.Error){
							vm.$toast.alert("出现错误，请稍后再试！")
						}else{
							localStorage.setItem("orderId", res.OrderId);
							console.log(plus.webview.currentWebview().ID);
							var pay = plus.webview.create("../shopping/pay2.html", "pay2", {}, {
								ID: plus.webview.currentWebview().ID,
								d:_this.d
							}); 
							pay.show();
						}
						console.log(res);
						console.log(res.OrderId);
						console.log(localStorage.getItem("orderId"));
						console.log("生成订单");
					}
				})					
			}
		},
		mounted() {
				var gid = plus.webview.currentWebview().Id
				ajax({
					url: "http://dsapi.ysd3g.com/API/GoodsDetail",
					dataType: "jsonp",
					data: {
						gId: gid
					},
					success(res) {
						vm.detail = res.Detail;
						vm.pid = res.Id;
					}
				});
				if(key!= null) {//如果key值不为空查看是否已收藏
					ajax({
						url: "http://dsapi.ysd3g.com/API/MyGoodsCollectList",
						dataType: "jsonp",
						data: {
							p: 1,
							key: key
						},
						success(res) {
							for(var i = 0; i < res.Data.length; i++) {
								if(res.Data[i].GoodsId == gid) {
									vm.isCollected = true;
								}
							}
						}
					})
				}
				var spg = localStorage.getItem(JSON.parse(plus.storage.getItem("userData"))); //购物车内的商品
				if(spg != null) {
					var shopcartGoods = JSON.parse(localStorage.getItem(JSON.parse(plus.storage.getItem("userData")))); //购物车里面的商品
					for(var i = 0; i < shopcartGoods.length; i++) { //遍历购物车
						if(shopcartGoods[i].goodsId == gid) { //如果购物车里面有此商品
							this.addShopcartCount = shopcartGoods[i].buyCount;
						}
					}
				}
			}
		})
	</script>
</html>